import Vue from 'vue'
import Component from 'vue-class-component'
import '../assets/css/filterStyle.css'
import '../modules/product/productStyle.css'
import {Watch} from 'decorators'

@Component({
  props: {
    items: Array,
    height: Number
  }
})

export default class FilterViewClass extends Vue {
  selectItems = []
  wrapperHeight = 0
  lists = []

  created() {
    if (this.items && this.items.length > 0) {
      this.lists = this.items
    }
  }

  @Watch('items', {immediate: true, deep: true})
  onItemsChange (items) {
    if (items && items.length > 0) {
      this.lists = items
    }
  }

  handlerClickCell (e, index) {
    e.stopPropagation()

    this.$emit('click', index)
  }

  handlerCancel () {
    this.$emit('dismiss')
  }

  handlerFilter() {
    this.$emit('sure')
  }

  get addLayout() {
    return 'height:' + String(this.height - 44) + 'px'
  }

  get addContentLayout() {
    return 'height:' + String(this.height) + 'px'
  }

  checkSubSelectItem (value) {
    if (!value.children) { return }
    let valueString = ''
    for (let i in value.children) {
      let item = value.children[i]
      if (item.checked) {
        if (valueString.length) {
          valueString = valueString + ',' + item.name
        } else {
          valueString = valueString + item.name
        }
      }
    }
    return valueString
  }

  createItems() {
    if (this.lists && this.lists.length < 0) {
      return
    }
    const item = this.lists.map((value, index) => {
      return <div class='filterItemClass' onClick={ e => this.handlerClickCell(e, index)}>
                <span>{value.name}</span>
                <p>{ this.checkSubSelectItem(value)}</p>
                <icon name='rightArrow' scale='1.5'/>
             </div>
    })
    return item
  }

  render () {
    return (
      <div class='fitlerClass' style={this.addContentLayout}>
        <div class = 'filterContainClass' style={this.addLayout }>
          {this.createItems()}
        </div>
        <dl class = 'filterStyleClass'>
            <dd onClick={this.handlerCancel}>清除</dd>
            <dd onClick={this.handlerFilter}>筛选</dd>
        </dl>
      </div>
    )
  }
}
